<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="450" :left="uiLeft" :top="uiTop">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-menu">
                <div class="menu-left">
                    <FucMenuList :menuList="layerMenuList" @clickComponent="clickComponent" :isDisabled="false" :isChecked="false" />
                </div>
                <div class="menu-right">
                    <el-select v-model="colorMode" placeholder="请选择着色模式" style="width: 150px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>

            </div>
            <LayerTree :arr="tranformDataRef" @checkTree="checkTree" ref="layerTree" />
        </div>
    </Dialog>
    <TooltipCom v-if="currentDialog == 'save'" :content="'确定保存吗？'" :title="'保存'" :isVisible="true"
        @close="currentDialog = undefined" @confirm="saveConfirm" />
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "vue-xe2-plugin/dist-node/components/xe2/tools";
import { layerMenuList } from "@/scripts/menu/cimrts/layerMenuList";
import CimrtsMenuList from "@/components/common/CimrtsMenuList.vue";
import LayerTree from "@/components/virtualbatch/LayerTree.vue";
import { VirtualLayer } from "@/scripts/cimrtsManager/virtualLayer";
import { ElMessage } from "element-plus";
import TooltipCom from "@/components/common/TooltipCom.vue";
import FucMenuList from "@/components/common/FucMenuList.vue";

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = ref(document.body.clientWidth - 10 - 350);
const uiTop = ref(60);


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();
const eSRtsTileset = objm.cimrtsManager.eSRtsTileset
const virtualLayer = objm.cimrtsManager.virtualLayer as VirtualLayer

const options = [
    {
        value: "HIGHLIGHT",
        label: "默认颜色",
    },
    {
        value: "REPLACE",
        label: "图层纯色",
    },
    {
        value: "MIX",
        label: "图层混色",
    },
];

// 保存 
const save = () => {
    return new Promise((resolve) => {
        currentDialog.value = "save";
        const d = virtualLayer.dialogEvent.disposableOnce(async (val: string) => {
            d();
            if (val === "confirm") {
                const res = await virtualLayer.saveLayerConfig();
                // @ts-ignore
                if (res.status == "ok") {
                    ElMessage.success(`保存成功`);
                }
            }
            currentDialog.value = undefined;
            resolve("ok");
        });
    });
};

// 当前打开的弹框组件
const currentDialog = ref<undefined | string>(undefined);
const layerTree = ref<any>(null)

// 鼠标点击组件
const clickComponent = (item: any) => {
    switch (item.name) {
        case "刷新":
            virtualLayer.getTreeList();
            break;
        case "保存":
            save()
            break;
        case "生成随颜色":
            layerTree.value.random()
            break;
        case "恢复初始颜色":
            layerTree.value.reset()
            break;
    }
}
const colorMode = ref(eSRtsTileset.colorBlendMode ?? "HIGHLIGHT");

watch(colorMode, (val: any) => {
    console.log(val, "val");
    eSRtsTileset.colorBlendMode = val;
});

const tranformDataRef = toVR<any>(d, [virtualLayer, "tranformData"]);

const checkTree = (finalConfig: any) => {
    eSRtsTileset.layerConfig = finalConfig;
};

// 保存 弹出框确定按钮
const saveConfirm = () => {
    virtualLayer.dialogEvent.emit("confirm");
}
onMounted(() => {
    virtualLayer.init()
})
onBeforeUnmount(() => {
    eSRtsTileset.colorBlendMode = "HIGHLIGHT"
})
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.cimrts-menu {
    background-color: #f0f0f0;
    width: calc(100%);
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.menu-left {
    width: 50%;
}

.panel-list {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
}

.panel-list>img {
    width: 20px;
    height: 20px;
}


.hover {
    background-color: #cfd8f3;
}
</style>